<template>
	<div id="quku_song">
		<div class="container">
			<div class="handle-box">
				<el-checkbox v-model="query.checked" @change="handleStatusChange" style="margin-bottom: 18px">
					<!-- 待审核 -->
					{{ $t('m.daiShenHeTick') }}
				</el-checkbox>
				<el-form ref="form" :inline="true" :model="form">
					<el-form-item label="">
						<el-input
							placeholder="ID"
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.ids"
							class="handle-input mr10"
						></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input
							placeholder="歌曲名"
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.importName"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.actorImportName"
							placeholder="歌手名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.albumImportName"
							placeholder="专辑名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.cppoaName"
							placeholder="CP名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-select
							@change="handleSearch"
							:clearable="true"
							v-model="query.genre"
							placeholder="风格"
							class="handle-select mr10"
						>
							<el-option v-for="(item, index) in genres_3" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.isrc"
							placeholder="ISRC"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-select
							@change="handleSearch"
							:clearable="true"
							v-model="query.status"
							placeholder="状态"
							class="handle-select mr10"
						>
							<el-option key="0" label="下线" value="0"></el-option>
							<el-option key="1" label="上线" value="1"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							v-model="query.creator"
							clearable
							@clear="handleSearch"
							placeholder="操作者"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="handleSearch">
							<!-- 查询 -->
							{{ $t('m.queryBtn') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table
				:data="tableData"
				border
				class="table"
				ref="multipleTable"
				header-cell-class-name="table-header"
				@selection-change="handleSelectionChange"
				:cell-style="cellStyle"
			>
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="id" label="ID" width="auto" align="center" :show-overflow-tooltip="true"></el-table-column>

				<el-table-column
					prop="externalId"
					label="externalId"
					width="auto"
					align="center"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column width="auto" label="歌曲名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.importName }}</template>
				</el-table-column>

				<el-table-column width="auto" label="歌手名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.actors ? scope.row.actors.name : '' }}</template>
				</el-table-column>

				<el-table-column width="auto" label="专辑名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.tblAlbum ? scope.row.tblAlbum.name : '' }}</template>
				</el-table-column>

				<el-table-column width="auto" label="CP名称" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.tblCppartner ? scope.row.tblCppartner.name : '' }}</template>
				</el-table-column>

				<el-table-column width="auto" label="风格" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.genre }}</template>
				</el-table-column>

				<el-table-column width="auto" label="ISRC" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.isrc }}</template>
				</el-table-column>

				<el-table-column width="auto" label="状态" align="center">
					<template slot-scope="scope">
						<img
							v-if="scope.row.status == 1"
							style="width: 20px; height: 20px"
							src="@/assets/images/歌曲管理/u464.png"
							alt=""
						/>
						<img
							v-else-if="scope.row.status == 0"
							style="width: 20px; height: 20px"
							src="@/assets/images/歌曲管理/u468.png"
							alt=""
						/>
					</template>
				</el-table-column>

				<el-table-column width="auto" label="操作者" align="center">
					<template slot-scope="scope">{{ scope.row.creator }}</template>
				</el-table-column>

				<el-table-column width="auto" label="更新时间" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.updateTime }}</template>
				</el-table-column>

				<el-table-column label="试听" prop="preview" align="center" v-if="!query.show">
					<template slot-scope="scope">
						<a
							v-if="scope.row.tblSongfiles && scope.row.tblSongfiles.length > 0"
							@click="handleClick($event, scope.row, scope.$index)"
							style="color: black; display: inline-block; cursor: pointer; font-size: 16px"
						>
							<svg-icon
								:data_iconName="scope.row.paused ? '播放' : '暂停'"
								:className="scope.row.paused ? 'play_icon' : 'pause_icon'"
							/>
						</a>
					</template>
					<!-- <template slot-scope="scope">
                        <a
                            v-if="scope.row.tblSongfiles && scope.row.tblSongfiles.length > 0"
                            @click="handleClick($event, scope.row, scope.$index)"
                            style="color:black; display: inline-block;cursor:pointer;font-size: 16px;"
                        >
                            <svg-icon
                                :data_iconName="playlist[currentIndex].paused ? '播放' : '暂停'"
                                :className="playlist[currentIndex].paused ? 'play_icon' : 'pause_icon'"
                            />
                        </a>
                    </template> -->
				</el-table-column>
				<el-table-column width="225" label="管理" align="center">
					<template slot-scope="scope">
						<el-button
							@click="handleEdit(scope.$index, scope.row)"
							v-if="!query.show"
							type="primary"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 编辑 -->
							{{ $t('m.editBtn') }}
						</el-button>

						<el-button
							@click="handleTagging(scope.$index, scope.row)"
							v-if="!query.show"
							type="warning"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 打标签 -->
							{{ $t('m.hitLabelBtn') }}
						</el-button>

						<el-button
							@click="handlePush(scope.$index, scope.row)"
							v-if="!query.show"
							type="success"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 推送 -->
							{{ $t('m.pushBtn') }}
						</el-button>

						<el-button @click="handleChecked(scope.$index, scope.row)" v-if="query.show" type="warning" size="mini"
							>审核</el-button
						>
					</template>
				</el-table-column>
			</el-table>

			<div class="pagination">
				<el-pagination
					background
					layout="total,sizes, prev, pager, next, jumper"
					:page-sizes="[5, 10, 20, 30]"
					@size-change="handleSizeChange"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 播放歌词弹出框 -->
		<el-dialog
			:title="playerTitle"
			:visible.sync="playListVisible"
			width="500px"
			:close-on-click-modal="false"
			:show-close="true"
			@close="handleClose_1"
		>
			<scroll :data="[currentLyric ? currentLyric : {}]" class="middle-r" ref="lyricList">
				<div class="lyric-wrapper">
					<div v-if="currentLyric">
						<p
							ref="lyricLine"
							class="text"
							:class="{ current: currentLineNum === index }"
							v-for="(line, index) in currentLyric.lines"
							:key="index"
						>
							{{ line.txt }}
						</p>
					</div>
				</div>
			</scroll>
			<audio
				:src="currentSong.tblSongfiles && currentSong.tblSongfiles[0] ? currentSong.tblSongfiles[0].filePath : ''"
				ref="audio"
				@error="error"
				@play="ready"
				@canplay="getDuration"
				@timeupdate="updateTime"
				@ended="end"
			></audio>
			<!-- 进度条 -->
			<div class="progressBar">
				<span class="startTime">{{ timeFormat(currentTime) }}</span>
				<!-- @change="changecurrentTime" -->
				<el-slider
					:show-tooltip="true"
					:format-tooltip="timestepToolTip"
					@change="changecurrentTime"
					@input="onProgressBarChange"
					:style="{}"
					v-model="currentTime"
					:max="musicAllDuration"
					class="progress"
					@mousedown.native="isChange = true"
					@mouseup.native="isChange = false"
				></el-slider>
				<span class="endTime">{{ timeFormat(musicAllDuration) }}</span>
			</div>
			<div class="btn-audio">
				<!-- 上一首歌曲 -->
				<div @click="prev" id="backSong"><span class="iconfont icon-shangyiqu" style="font-size: 20px"></span></div>
				<!-- 播放与暂停 -->
				<div class="status">
					<div id="pause" v-show="playing" @click="togglePlaying_1">
						<i class="el-icon-video-pause" style="font-size: 40px"></i>
					</div>
					<div id="play" v-show="!playing" @click="togglePlaying_1">
						<i class="el-icon-video-play" style="font-size: 40px"></i>
					</div>
				</div>
				<!-- 下一首歌曲 -->
				<div @click="next" id="nextSong"><span class="iconfont icon-xiayiqu" style="font-size: 20px"></span></div>
				<!-- 歌词 -->
				<div @click="handleShowLyric" id="album"><span style="font-size: 15px">词</span></div>
			</div>

			<!-- </div> -->
		</el-dialog>

		<!-- 打标签弹出框 -->
		<el-dialog
			title="打标签"
			:visible.sync="editVisible"
			width="30%"
			:close-on-click-modal="false"
			:show-close="true"
			@close="handleClose_2"
		>
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="歌曲名">
					<el-input v-model="form.songName"></el-input>
				</el-form-item>
				<el-form-item label="歌手名">
					<el-input v-model="form.actorName"></el-input>
				</el-form-item>

				<el-form-item label="标签：">
					<div class="block">
						<el-cascader
							:show-all-levels="false"
							v-model="form.tags"
							class="w"
							:options="tagList"
							:props="{
								emitPath: false,
								multiple: true,
								checkStrictly: true,
								value: 'value',
								label: 'label',
								children: 'children'
							}"
							@change="handlechange"
						>
							<template slot-scope="{ node, data }">
								<span>{{ data.label }}</span>
								<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
							</template>
						</el-cascader>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveTagging">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 渠道弹出框 -->
		<el-dialog title="推送" :visible.sync="channelVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="渠道">
					<el-select v-model="channel" class="" style="width: 100%" clearable>
						<el-option key="0" label="OPPO" value="1001"></el-option>
						<el-option key="1" label="VIVO" value="1002"></el-option>
						<el-option key="2" label="XIAOMI" value="1003"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="channelVisible = false">取 消</el-button>
				<el-button type="primary" @click="savePush">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Lyric from '@/components/common/js/Lyric.js';
	import BScroll from 'better-scroll';
	import Scroll from 'base/scroll/scroll';
	// import { qukusong } from './mixins/qukusong';
	import { qukusong } from './mixins/';
	export default {
		name: 'QukuSong',
		mixins: [qukusong],
		data() {
			return {};
		},
		activated() {},
		watch: {
			currentLyric(newLyric, oldLyric) {
				console.log(newLyric, oldLyric);
				if (oldLyric) {
					oldLyric.stop(); // 停止之前歌词对象的计时器
				}
				if (newLyric) {
					this.currentTime = 0;
					this.currentLineNum = 0;
					newLyric.seek(0);
				}
				if (this.playListVisible === true && this.$refs.lyricLine) {
					let lineEl = this.$refs.lyricLine[0]; // this.$refs.lyricLine是p元素数组
					this.$refs.lyricList.scrollToElement(lineEl, 1000);
				}
			},
			currentSong: {
				deep: true,
				immediate: true,
				handler(newSong, oldSong) {
					console.log(newSong, oldSong);
					if (!newSong.id) {
						return;
					}
					// if (newSong.id === oldSong.id) {
					//     return;
					// } // 限制了单曲循环

					this.getLyric(newSong.id);
				}
			},
			playing(newPlaying, oldPlaying) {
				console.log(newPlaying, oldPlaying);
				this.$nextTick(() => {
					let audio = this.$refs.audio;
					newPlaying ? audio.play() : audio.pause();
				});
			},
			playListVisible(a, b) {}
		},
		components: {
			Scroll
		},
		computed: {
			percent() {
				return this.currentTime / this.musicAllDuration;
			}
		},
		methods: {
			prev() {
				if (!this.songReady) {
					return;
				}
				if (this.playlist.length === 1) {
					this.loop();
					return;
				} else {
					let index = this.currentIndex - 1;
					if (index === -1) {
						index = this.playlist.length - 1;
						this.tableData[0].paused = true;
						this.tableData[index].paused = false;
						this.SET_QUKUSONG_DATA([...this.tableData]);
					} else {
						this.tableData[this.currentIndex].paused = true;
						this.tableData[index].paused = false;
						this.SET_QUKUSONG_DATA([...this.tableData]);
					}
					this.setCurrentIndex(index);
					this.setPlayingState(true);
				}
				this.playerTitle = '歌曲名: ' + this.currentSong.importName + ' 歌手名: ' + this.currentSong.actors.name;
				this.songReady = false;
			},

			loop() {
				this.setPlayList([...this.playlist]); // 触发 currentSong 改变
				this.$refs.audio.currentTime = 0;
				if (this.currentLyric) {
					this.currentLyric.seek(0);
					this.currentLineNum = 0;
				}

				this.playerTitle = '歌曲名: ' + this.currentSong.importName + ' 歌手名: ' + this.currentSong.actors.name;
				this.setPlayingState(true);
				this.tableData[0].paused = false;
				this.SET_QUKUSONG_DATA([...this.tableData]);
			},

			next() {
				if (!this.songReady) {
					return;
				}
				if (this.playlist.length === 1) {
					this.loop();
					return;
				} else {
					let index = this.currentIndex + 1;
					if (index === this.playlist.length) {
						index = 0;
						this.tableData[this.playlist.length - 1].paused = true;
						this.tableData[index].paused = false;
						this.SET_QUKUSONG_DATA([...this.tableData]);
					} else {
						this.tableData[this.currentIndex].paused = true;
						this.tableData[index].paused = false;
						this.SET_QUKUSONG_DATA([...this.tableData]);
					}

					this.setCurrentIndex(index);
					this.setPlayingState(true);
				}

				this.playerTitle = '歌曲名: ' + this.currentSong.importName + ' 歌手名: ' + this.currentSong.actors.name;

				this.songReady = false;
			},
			handleShowLyric() {
				this.showLyric = !this.showLyric;
			},
			timestepToolTip(v) {
				return this.timeFormat(v);
			},

			togglePlaying_1() {
				if (!this.songReady) {
					// 歌曲没加载好不让点
					return;
				}
				this.setPlayingState(!this.playing);

				if (this.currentLyric) {
					this.currentLyric.togglePlay(); // 控制歌词播放
				}
			},

			changecurrentTime(v) {
				let currentTime = this.musicAllDuration * this.percent;
				this.$refs.audio.currentTime = currentTime; // 保证手指拖动释放后不弹回原位
				this.currentTime = currentTime;
				if (!this.playing) {
					this.togglePlaying_1();
				}
				console.log(this.currentLyric);
				if (this.currentLyric) {
					this.currentLyric.seek(currentTime * 1000);
				}
				this.isChange = false;
			},

			onProgressBarChange(v) {
				// let currentTime = this.percent * this.musicAllDuration;
				// bug所在地
				// if (this.currentLyric) {
				//     this.currentLyric.seek(currentTime * 1000);
				//     this.currentLyric.stop();
				// }
			},
			updateTime(e) {
				if (this.isChange === true) return;
				console.log('updateTime');
				this.currentTime = e.target.currentTime;
			},

			getDuration() {
				this.musicAllDuration = this.$refs.audio.duration;
			},
			end() {
				this.next();
			},

			ready() {
				this.songReady = true;
			},
			error() {
				this.songReady = true;
			},
			togglePlaying_2(index) {
				console.log(index);

				this.setCurrentIndex(index);
				this.playListVisible = true;
				this.playerTitle = '歌曲名: ' + row.importName + ' 歌手名: ' + row.actors.name;

				if (!this.songReady) {
					// 歌曲没加载好不让点
					return;
				}

				if (this.playlist[index].paused == true) {
					for (var i = 0; i < this.playlist.length; i++) {
						if (this.playlist[index].id != this.playlist[i].id) {
							this.playlist[i].paused = true;
						}
					}
					this.playlist[index].paused = false;
				}
				this.SET_QUKUSONG_DATA([...this.playlist]);
				this.setPlayList([...this.playlist]);
				this.setCurrentIndex(index);
				// this.getLyric(this.currentSong.id);
			},
			async getLyric(id) {
				try {
					let url = '/song/getlrc';
					let { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							id
						})
					});

					if (res.code === '3002') {
						this.currentLyric = null;
						return;
					}
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					if (res.data.content) {
						this.currentLyric = new Lyric(res.data.content, this.handleLyric);
						this.setPlayingState(true);
						this.currentLyric.play();
					} else {
						this.currentLyric = null;
						this.currentLineNum = 0;
					}
				} catch (err) {
					console.dir(err);
					// 获取歌词失败时
					this.currentLyric = null;
					this.currentLineNum = 0;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			handleClick(e, row, index) {
				this.togglePlaying_2(index);
			},

			handleClose_1() {
				this.tableData[this.currentIndex].paused = true;
				this.SET_QUKUSONG_DATA([...this.tableData]);
				this.setPlayingState(false);
				this.setCurrentIndex(-1);

				this.currentLineNum = 0;
				this.currentTime = 0;
				this.$refs.audio.currentTime = 0;

				this.currentLyric = null;
			},
			handleLyric({ lineNum, txt }) {
				console.log(lineNum, txt);
				this.currentLineNum = lineNum;
				if (lineNum >= 6) {
					let lineEl = this.$refs.lyricLine[lineNum - 5]; // this.$refs.lyricLine是p元素数组
					this.$refs.lyricList.scrollToElement(lineEl, 1000);
				} else {
					this.$refs.lyricList.scrollTo(0, 0, 1000);
				}
			}
		}
	};
</script>

<style lang="scss">
	#quku_song {
		.el-dialog__header {
			text-align: center;

			.el-dialog__title {
				font-size: 14px;
				color: #666;
				font-weight: bold;
			}
		}
		.el-dialog__body {
			padding: 0 20px 30px;
			.btn-audio {
				position: absolute;
				bottom: 0px;
				left: 50%;
				transform: translate(-50%, 0);
				width: 300px;
				height: 54px;

				display: flex;
				justify-content: center;
				align-items: center;

				.status {
					cursor: pointer;
					background: rgba($color: #000000, $alpha: 0.05);
					border-radius: 50%;
					width: 40px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					&:hover {
						background: rgba($color: #000000, $alpha: 0.1);
					}
					margin: 0 10px 0;
				}
				#backSong,
				#nextSong {
					cursor: pointer;
					border-radius: 50%;
					width: 30px;
					height: 30px;
					line-height: 30px;
					text-align: center;
				}

				#backSong:hover,
				#nextSong:hover,
				#album:hover {
					color: #ed6566;
				}
				#nextSong {
				}
				#album {
					cursor: pointer;
					margin-left: 10px;
				}
			}

			.progressBar {
				width: 100%;
				height: 70px;
				line-height: 70px;
				display: flex;
				justify-content: center;
				align-items: center;
				.startTime {
					margin-right: 15px;
				}
				.progress {
					width: 200px;
				}
				.endTime {
					margin-left: 15px;
				}
			}

			.middle-r {
				display: inline-block;
				vertical-align: top;
				width: 100%;
				height: 400px;

				overflow: hidden;

				.lyric-wrapper {
					width: 80%;
					margin: 0 auto;
					overflow: hidden;
					text-align: center;

					.text {
						line-height: 40px;
						color: rgba(0, 0, 0, 0.5);
						font-size: 14px;

						&.current {
							color: #2ad181;
						}
					}
				}
			}
		}

		.table-header {
			.cell {
				white-space: nowrap !important;
			}
		}
		.handle-box {
			margin-bottom: 20px;
			.el-form {
				display: flex;
				flex-direction: row;
				.el-form-item {
					width: calc(100% / 10);
					.el-form-item__content {
						.el-select,
						.handle-input {
							width: 100%;
						}
					}
				}
			}
		}

		.handle-select {
			width: 120px;
		}

		.handle-input {
			/* width: 300px; */
			width: 69px;
			height: 28px;
			display: inline-block;
		}
		.table {
			width: 100%;
			font-size: 14px;
			.play_icon,
			.pause_icon {
				width: 43px;
				height: 37px;
			}
		}
		.red {
			color: #ff0000;
		}
		.mr10 {
			margin-right: 10px;
		}
		.table-td-thumb {
			display: block;
			margin: auto;
			width: 40px;
			height: 40px;
		}
	}
</style>
